<template>
  <el-row>
    <el-col :xs="0" :md="24">
      <el-card style="width: 1200px; margin: 100px auto">
        <el-steps :active="active" finish-status="success">
          <el-step title="验证"></el-step>
          <el-step title="重置密码"></el-step>
          <el-step title="成功"></el-step>
        </el-steps>

        <div style="width: 400px; margin: auto">
          <el-form :model="forgetUser" status-icon :rules="rules" ref="validateForm" label-width="100px"
                   class="demo-ruleForm" v-show="active == 0" style="position: relative">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="forgetUser.email" autocomplete="off" clearable></el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
              <el-input v-model="forgetUser.phone" autocomplete="off" clearable></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('validateForm')">下一步</el-button>
            </el-form-item>

          </el-form>

          <el-form :model="forgetUser" status-icon :rules="rules" ref="PassForm" label-width="100px"
                   class="demo-ruleForm"
                   v-show="active == 1">
            <el-form-item label="重置密码" prop="pass">
              <el-input v-model="forgetUser.pass" autocomplete="off" clearable></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('PassForm')">下一步</el-button>
            </el-form-item>
          </el-form>

          <el-result icon="success" title="成功提示" subTitle="密码修改成功，前往登录界面" v-show="active == 3">
            <template #extra>
              <el-button type="primary" size="medium" @click="toLoginPage">前往登录</el-button>
            </template>
          </el-result>
        </div>
        <div class="card-footer" v-show="active == 0">
          <router-link type="primary" style="float: right" to="/login">点错了？返回首页</router-link>
        </div>
      </el-card>
    </el-col>
  </el-row>


  <el-row>
    <el-col :xs="24" :sm="0">
      <h2>请在电脑端登录！！！</h2>
    </el-col>
  </el-row>
</template>

<script>
import {changePassword, forgetValidate} from "@/api/user";
import router from "@/router";
import { ElLoading } from 'element-plus'

export default {
  name: "forget",
  data(){

    return {
      active: 0,
      forgetUser: {
        email: '',
        phone: '',
        pass: ''
      },
      rules: {
        email: [
          {required: true, message: '邮箱不能为空', trigger: 'blur'},
          {min: 5, max: 32, message: '邮箱长度在5-32个字符之间', trigger: 'blur'},
          {type: 'email', message: '邮箱格式错误', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '手机号不能为空', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback()
              } else if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
                callback("手机号格式不正确");
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        pass: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {min: 5, max: 20, message: '密码长度在5-20个字符之间', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    next(){
      this.active++;
      this.active %= 4
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName === 'validateForm') {
            forgetValidate(this.forgetUser).then(res => {
              if (res.status) {
                this.next()
              }
            })
          } else if (formName === 'PassForm') {
            this.next()

            changePassword(this.forgetUser).then(res => {
              if (res.status) {
                let service = ElLoading.service({ fullscreen: true });
                setTimeout(() => {
                  service.close()
                  this.next()
                }, 2000)
              }
            })
          }
        }
      })
    },
    toLoginPage(){
      router.push('/login')
    }
  }
}
</script>

<style scoped>
.el-card{
  min-height: 300px;
}
.card-footer{

}
</style>
